
<template>
<div class="table">
        <div class="divSearch">
            <!--搜索框-->
            <Row>
                <!--根据需求删除不不要查询条件-->
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">地区:</label>
                    <Select v-model="searchModel.AreaCode"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option :value="userinfo.AreaCode">全部</Option>
                        <Option :value="item.value" v-for="item in AreaList" :key="item.value">{{item.label}}</Option>
                    </Select>
                </Col>
                <Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}">
                    <label class="searchLabel">填报年度:</label>
                    <Select v-model="searchModel.FillInYear"  placeholder="请选择..." class="searchInput" @on-change="getStatsList()">
                        <Option value="">全部</Option>
                        <Option :value="item.DictText" v-for="item in CreateYearList" :key="item.DictText">{{item.DictText}}</Option>
                    </Select>
                </Col>
                <!-- <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-search" type="primary" @click="getStatsList()" class="searchButton">查询</Button>
                </Col> -->
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
                    <Button icon="ios-export" type="primary" @click="getExcelData()" class="searchButton">数据导出</Button>
                </Col>
                <Col >
                    <RadioGroup v-model="CheckButton" @on-change="changeButton" type="button" class="searchRight" >
                        <Radio label="listShow" title="列表"><span class="iconTitle">列表</span><Icon type="ios-paper" size="16"></Icon></Radio>
                        <Radio label="barShow" title="饼图"><span class="iconTitle">柱状图</span><Icon type="ios-pie" size="16"></Icon></Radio>   
                        <Radio label="mapShow" title="地图"><span class="iconTitle">地图</span><Icon type="android-map" size="16"></Icon></Radio>                                                                               
                    </RadioGroup>    
                </Col>
            </Row>
        </div>
        <Row  v-show="listShow">
            <!-- 列表-->
            <Col>
                <table class="ContentTable">
                    <caption>
                        <div>
                            <span class="tableNum">{{CurrentYear}}年(二){{CurrentAreaName}}蔬菜生产设施情况调查表(全面统计)</span>
                            <span class="tip">单位：亩</span>
                        </div>
                    </caption>
                    <thead>
                        <tr>
                            <th rowspan="2" width="72">地区</th>
                            <th rowspan="2">设施蔬菜占地面积</th>
                            <th rowspan="2">上年同期数</th>
                            <th rowspan="2">比上年增减%</th>
                            <th colspan="9">其中</th>
                        </tr>
                        <tr>
                            <th>小棚蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                            <th>大中棚蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                            <th>温室蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr v-for="(item,index)  in datas" :key="item.AreaCode" :class="{'tdColor':index%2!=0}">
                            <td width="72">{{item.AreaName}}</td>
                            <td>{{item.FacilitiesArea|formatCurrency}}</td>
                            <td>{{item.OldFacilitiesArea|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.FacilitiesArea)-getZero(item.OldFacilitiesArea)),getZero(item.OldFacilitiesArea))}}</td>
                            <td>{{item.SmallArea|formatCurrency}}</td>
                            <td>{{item.OldSmallArea|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.SmallArea)-getZero(item.SmallArea)),getZero(item.SmallArea))}}</td>
                            <td>{{item.BigArea|formatCurrency}}</td>
                            <td>{{item.OldBigArea|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.BigArea)-getZero(item.OldBigArea)),getZero(item.OldBigArea))}}</td>
                            <td>{{item.GreenhouseArea|formatCurrency}}</td>
                            <td>{{item.OldGreenhouseArea|formatCurrency}}</td>
                            <td>{{getDivided((getZero(item.GreenhouseArea)-getZero(item.OldGreenhouseArea)),getZero(item.OldGreenhouseArea))}}</td>
                        </tr>
                    </tbody>
                </table>
            </Col>
        </Row>
        <Row v-show="barShow">
            <!--柱状图-->
            <div id="divBar" style="border:1px solid #D7DDE4; ">柱状图</div>
        </Row>
        <Row  v-show="mapShow">
            <!--地图展示-->
            <div id="divMap"  style="border:1px solid #D7DDE4; ">地图</div>
        </Row>
        <Modal v-model="detailView" :mask-closable="false" width="1200">
            <p slot="header" class="title">
                <Icon type="ios-paper" size="20"></Icon>
                <span style="font-size: 20px">(一){{searchModel.FillInYear}}-{{CurrentAreaName}}-(一)蔬菜用地情况调查表(全面统计)</span>
            </p>
            <p slot="close">
                <Icon type="close-circled" color="red" size=25></Icon>
            </p>
                <table class="DetailTable">
                    <thead>
                        <tr>
                            <th rowspan="2" width="72">地区</th>
                            <th rowspan="2">设施蔬菜占地面积</th>
                            <th rowspan="2">上年同期数</th>
                            <th rowspan="2">比上年增减%</th>
                            <th colspan="9">其中</th>                          
                        </tr>
                        <tr>
                            <th>小棚蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                            <th>大中棚蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                            <th>温室蔬菜占地面积</th>
                            <th>上年同期数</th>
                            <th>比上年增减%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index)  in detailDatas" :key="item.AreaCode" :class="{'tdColor':index%2!=0}">
                            <td width="72">{{item.AreaName}}</td>
                            <td>{{item.FacilitiesArea}}</td>
                            <td>{{item.OldFacilitiesArea}}</td>
                            <td>{{getDivided((getZero(item.FacilitiesArea)-getZero(item.OldFacilitiesArea)),getZero(item.OldFacilitiesArea))}}</td>
                            <td>{{item.SmallArea}}</td>
                            <td>{{item.OldSmallArea}}</td>
                            <td>{{getDivided((getZero(item.SmallArea)-getZero(item.SmallArea)),getZero(item.SmallArea))}}</td>
                            <td>{{item.BigArea}}</td>
                            <td>{{item.OldBigArea}}</td>
                            <td>{{getDivided((getZero(item.BigArea)-getZero(item.OldBigArea)),getZero(item.OldBigArea))}}</td>
                            <td>{{item.GreenhouseArea}}</td>
                            <td>{{item.OldGreenhouseArea}}</td>
                            <td>{{getDivided((getZero(item.GreenhouseArea)-getZero(item.OldGreenhouseArea)),getZero(item.OldGreenhouseArea))}}</td>
                        </tr>
                    </tbody>
                </table>
                <div slot="footer"></div>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            self: this,
            CreateYearList: this.GetGroupDict("ReportYear"), //年度
            CurrentYear: this.GetCurrentYear(),//当前年度
            AreaList: this.SearchAreaList(this.GetlocaStorage("VegUserInfo").AreaCode),
            Option:'1',
            CurrentAreaName:'',
            userinfo: this.GetlocaStorage("VegUserInfo"),//获取当前用户信息
            CheckButton:'listShow',
            datas:[],//列表数据
            detailDatas:[],//详情
            isProvince:false,//是否为省级账号(操作栏目显示)
            detailView:false,//modal显示开关
            //柱状图数据
            echartsItem:['设施蔬菜占地面积','小棚蔬菜占地面积','大中棚蔬菜占地面积','温室蔬菜占地面积'],
            AreaData:[],
            FacilitiesAreaData:[],
            SmallAreaData:[],
            BigAreaData:[],
            GreenhouseAreaData:[],
            barList:[],
             //地图数据
            mapList:[],
            mapType:'',
            geoCoordMap:[],
            MapFacilitiesAreaData:[],
            MapSmallAreaData:[],
            MapBigAreaData:[],
            MapGreenhouseAreaData:[],
            GeoData:'',
            //查询模型：根据需求删除不不要查询条件
            //蔬菜生产情况表代码
            searchModel: {
                Id: '',
                ReportCode: 'VegBasicInfo',
                FillInYear: '',
                TimesType: '',
                AreaCode: this.GetlocaStorage("VegUserInfo").AreaCode,
                PageNumber: 1,
                PageSize: 20,
                Status: '4',
                Opinion: ''
            },
            listShow:false,//列表显示控制器
            barShow:false,//饼图显示控制器
            mapShow:false,//地图显示控制器
        }  
    },
    //方法
    methods: {
         //展示切换
        changeButton:function(n){
            if(n=="listShow")
            {
                this.listShow=true;//显示列表
                this.barShow=false;
                this.mapShow=false;
            }
            else if(n=="barShow")
            {
                this.listShow=false;
                this.barShow=true;//显示柱状图
                this.mapShow=false;
            }
             else if(n=="mapShow")
            {
                this.listShow=false;
                this.barShow=false;//显示地图
                this.mapShow=true;
            }
            else{
                 this.listShow=true;//默认显示列表
                 this.barShow=false;
                 this.mapShow=false;
            }
        },
        getStatsList(){
            var self=this;
            //柱状图数据
            self.AreaData=[];
            self.FacilitiesAreaData=[];
            self.SmallAreaData=[];
            self.BigAreaData=[];
            self.GreenhouseAreaData=[];      
            //地图数据      
            self.MapFacilitiesAreaData=[];//
            self.MapSmallAreaData=[];
            self.MapBigAreaData=[];
            self.MapGreenhouseAreaData=[];

            if (self.searchModel.FillInYear != null && self.searchModel.FillInYear != '') {
                self.searchModel.FillInYear = self.searchModel.FillInYear;
            } else {
                self.searchModel.FillInYear = self.CurrentYear + '年';//填报年度-----数据字典值
            }
            //获取地图类型
            if(self.userinfo.AreaCode=="530000000000")
            {
                self.isProvince=true;
                self.mapType=self.searchModel.AreaCode;
            }
            else{
                self.mapType=self.userinfo.AreaCode;
            }
            self.AreaData=[];
            self.FacilitiesAreaData=[];
            self.SmallAreaData=[];
            self.BigAreaData=[];
            self.GreenhouseAreaData=[];
            self.barList=[],
             //地图数据
            self.mapList=[],
            self.MapFacilitiesAreaData=[];
            self.MapSmallAreaData=[];
            self.MapBigAreaData=[];
            self.MapGreenhouseAreaData=[];
            self.GeoData=self.GetGeoData(self.mapType);
            self.$http.post('VegFacility/PostStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                       self.datas= res.data.model;
                       self.CurrentAreaName=res.data.model[0].AreaName;
                       for(var i=1;i<res.data.model.length;i++)
                       {   //柱状图数据
                            self.AreaData.push(res.data.model[i].AreaName);
                            self.FacilitiesAreaData.push(res.data.model[i].FacilitiesArea);
                            self.SmallAreaData.push(res.data.model[i].SmallArea);
                            self.BigAreaData.push(res.data.model[i].BigArea);
                            self.GreenhouseAreaData.push(res.data.model[i].GreenhouseArea);
                            //地图数据
                            self.MapFacilitiesAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].FacilitiesArea});//
                            self.MapSmallAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].SmallArea});
                            self.MapBigAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].BigArea});
                            self.MapGreenhouseAreaData.push({'name':res.data.model[i].AreaName,'value':res.data.model[i].GreenhouseArea});
                       } 
                       self.barList.push(self.FacilitiesAreaData,self.SmallAreaData, self.BigAreaData,self.GreenhouseAreaData),
                        //地图数据
                        self.mapList.push(self.MapFacilitiesAreaData,self.MapSmallAreaData,self.MapBigAreaData,self.MapGreenhouseAreaData);
                       self.showEcharts();
                    }
                });
        },
        getDeTail(AreaCode){//获取详情
            var self=this;  
            self.detailView=true;    
            self.searchModel.AreaCode=AreaCode;
            self.$http.post('VegFacility/PostDetailStats', self.searchModel).then(function (res) {
                    if(res.data.status===1)
                    {
                        self.CurrentAreaName=res.data.model[0].AreaName;
                        self.detailDatas= res.data.model;
                    }
                });
        },
        getExcelData(){
            window.open(this.$http.defaults.baseURL + "VegFacility/GetStatsExcelData?AreaCode="+this.searchModel.AreaCode+"&&FillInYear="+this.searchModel.FillInYear+"&&Status="+this.searchModel.Status);
        },
        showEcharts(){
            //显示柱状图
            var self=this;
            var containerBar=document.getElementById('divBar');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerBar = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerBar.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerBar.style.height = (window.innerHeight-260)+'px';
            };
            //设置容器高宽
            resizeContainerBar();
            var myBar = myEcharts.init(containerBar, 'shine');
             
            // app.title = '堆叠柱状图';
            var BarName=self.CurrentYear+'年(二)'+self.CurrentAreaName+'蔬菜生产设施情况调查柱状图(全面统计)';
            var optionBar = self.GetBarOption(BarName,self.AreaData,self.echartsItem,self.barList);
            myBar.setOption(optionBar);
            //柱状图数据展示配置结束

            //显示地图
            var self=this;
            var containerMap=document.getElementById('divMap');
            var containerTable=document.getElementsByClassName('ivu-col ivu-col-span-4');
            // //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
            var resizeContainerMap = function () {
                //containerTable[0].clientWidth 左侧菜单栏的宽度
                containerMap.style.width = (window.innerWidth- containerTable[0].clientWidth-20)+'px';
                containerMap.style.height = (window.innerHeight-260)+'px';
            };
            //设置容器高宽
            resizeContainerMap();
            var myMap = myEcharts.init(containerMap, 'shine');
            var MapName=self.CurrentYear+'年(二)'+self.CurrentAreaName+'蔬菜生产设施情况调查统计地区分布图(全面统计)';
            var optionMap = self.GetMapOption(MapName,self.GeoData,self.mapType,self.echartsItem,self.mapList);
            myMap.setOption(optionMap);
            //用于使chart自适应高度和宽度
            window.onresize = function () {
                //重置容器高宽
                resizeContainerBar();
                resizeContainerMap();
                myMap.resize();
                myBar.resize();
            };
        }

    },
    //创建Vue页面方法
    created: function () {
        this.changeButton("listShow");
        this.getStatsList();
    },
    watch: {
        //需要监听的在此处新增监听对象
    }
}
</script>
<style scoped src="../../styles/stats.css"></style>